<template>
<div>
  <el-breadcrumb separator="/">
  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>用户管理</el-breadcrumb-item>
  <el-breadcrumb-item>角色管理</el-breadcrumb-item>

</el-breadcrumb >

  <el-card>
    <el-button type="primary" @click="dialogVisible=true">添加角色</el-button>
    <el-table border :data="roleInfo">
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-row v-for="(item1,i1) in scope.row.children" :key="item1.id" :class="['bd-bottom','vcenter']">
<!--            这是一级权限-->
            <el-col :span="5">
              <el-tag closable @close="tagClose(scope.row,item1.id)">{{item1.authName}}</el-tag>
              <i class="el-icon-caret-right"></i>
            </el-col>
<!--            这是二三级权限-->
            <el-col :span="19">
              <el-row v-for="(item2,i2) in item1.children" :key="item2.id" :class="[i2===0 ? '' : 'bd-top','vcenter']">
                <el-col :span="6">
                  <el-tag type="success" closable @close="tagClose(scope.row,item2.id)">{{item2.authName}}</el-tag>
                                <i class="el-icon-caret-right"></i>

                </el-col>
                <el-col :span="18">
                  <el-tag v-for="(item3,i2) in item2.children" :key="item3.id" type="warning" closable @close="tagClose(scope.row,item3.id)">
                    {{item3.authName}}
                  </el-tag>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </template>
      </el-table-column>

      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column label="角色名称" prop="roleName" ></el-table-column>
            <el-table-column label="角色描述" prop="roleDesc"></el-table-column>
            <el-table-column label="操作" >
               <template slot-scope="scope">
        <el-button type="primary" icon="el-icon-edit" circle @click="editRole(scope.row.id)">编辑</el-button>
        <el-button type="danger" icon="el-icon-delete" circle @click="delete_role(scope.row.id)">删除</el-button>

      <el-button type="warning" icon="el-icon-setting" circle @click="allocate_right(scope.row)">分配权限</el-button>

</template>
            </el-table-column>


    </el-table>
  </el-card>
<!--  这是添加角色对话框-->
    <el-dialog
  title="添加角色"
  :visible.sync="dialogVisible"
  width="50%"
   @close="formclose">
<!--    这是表单-->
  <el-form :model="addroleForm" :rules="addrolerule" ref="addroleForm" label-width="110px" status-icon>
  <el-form-item label="角色名称" prop="rolename" >
    <el-input v-model="addroleForm.rolename"></el-input>
  </el-form-item>
  </el-form>

    <el-form :model="addroleForm"  ref="addroleForm" label-width="110px" >
  <el-form-item label="角色描述" >
    <el-input v-model="addroleForm.roleinfo"></el-input>
  </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary"  @click="dialogsure()">确 定</el-button>
  </span>
</el-dialog>
<!--  这是编辑角色对话框-->
  <el-dialog
  title="修改角色"
  :visible.sync="dialogVisible2"
  width="50%" @click="formclose2"
  >
  <el-form :model="rectify_role"  ref="rectify_role" label-width="110px" status-icon>
  <el-form-item label="等级" >
    <el-input v-model="rectify_role.roleName" disabled></el-input>
  </el-form-item>
  </el-form>
    <el-form :model="rectify_role"  ref="rectify_role" label-width="110px" >
  <el-form-item label="角色描述" prop="mobile">
    <el-input v-model="rectify_role.roleDesc"></el-input>
  </el-form-item>
  </el-form>

  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible2 = false">取 消</el-button>
    <el-button type="primary"  @click="dialogsure2">确 定</el-button>
  </span>
</el-dialog>
<!--  这是分配角色对话框-->
  <el-dialog
  title="分配权限"
  :visible.sync="allocatedialogVisible"
  width="50%" @close="reset"
  >
  <el-tree :data="rightTree" :props="RightProps" show-checkbox node-key="id" default-expand-all
  :default-checked-keys="defkey" ref="Treeref"></el-tree>

  <span slot="footer" class="dialog-footer">
    <el-button @click="allocatedialogVisible = false">取 消</el-button>
    <el-button type="primary"  @click="allotright">确 定</el-button>
  </span>
</el-dialog>
</div>
</template>

<script>
import {getRoleList} from "../../../networks/get_role_list";
import {addRoles} from "../../../networks/add_roles";
import {search_roles} from "../../../networks/search_roles";
import {rectify_roles} from "../../../networks/rectify_roles";
import {deleteRoles} from "../../../networks/deleteroles";
import {deleteUsers} from "../../../networks/delete_users";
import {deleteRights} from "../../../networks/delete_rights";
import {getRightsListtree} from "../../../networks/get_rights_tree";
import {sendRights} from "../../../networks/send_rights";

export default {
name: "Roles",
  data(){
  return {
    roleId:'',
    roleInfo:[],
    dialogVisible:false,
    dialogVisible2:false,
    allocatedialogVisible:false,
    addroleForm:{
      rolename:'',
      roleinfo:''
    },
    rectify_role:{

    },
    addrolerule:{
      rolename:[{required:true,message:'你哪位？？？？'}]
    },
    rightTree:[],
     RightProps: {
          children: 'children',
          label: 'authName'
        },
    defkey:[

    ]
  }
  },
  methods:{
  allotright(){
    this.allocatedialogVisible = false
    const rids=[
        ...this.$refs.Treeref.getCheckedKeys(),
        ...this.$refs.Treeref.getHalfCheckedKeys()
    ]
    const rid2=rids.join(',')
    sendRights(this.roleId,rid2).then(
        res=>{
          if(res.meta.status!==200){
            this.$message.error('更新失败，请检查网络')
          }
        this.$message.success('权限更改成功')
          this.getroles()
      }

    )
    }
  ,
  reset(){
    this.defkey=[]
  },
  getLeafKeys(node,arr){
    if(!node.children){
      return arr.push(node.id)
    }
    node.children.forEach(item=>{
      this.getLeafKeys(item,arr)
    })
  },
  allocate_right(role){
    this.roleId=role.id
this.getLeafKeys(role,this.defkey)
this.allocatedialogVisible=true
    getRightsListtree().then(res=>{
      this.rightTree=res.data
    }
      )
  },
  tagClose(item,id2){

         this.$confirm('此操作将永久删除该权限, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
  deleteRights(item.id,id2).then(
    res=>{
      if(res.meta.status!==200){this.$message.error('删除失败，请检查网络')
      }
      item.children=res.data
    }
    )
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
  },
  formclose(){
  this.$refs.addroleForm.resetFields()
  },
    formclose2(){

  },
    getroles(){
    getRoleList().then(res=>{
    if(res.meta.status!==200){this.$message.error('获取角色失败，请查看网络哟')}
    this.roleInfo=res.data
  })
    },
    dialogsure(){
      addRoles(this.addroleForm.rolename,this.addroleForm.roleinfo).then(
          res=>{
            if(res.meta.status!==200){this.$message.error('添加角色失败')}
            this.$message.success('添加用户成功')
            this.getroles()
            this.dialogVisible=false
          }
      )
    },
    dialogsure2(){
    rectify_roles(this.rectify_role.roleId,this.rectify_role).then(
        res=>{
          if (res.meta.status!==200){this.$message.error('修改失败')}
        this.getroles()
        this.dialogVisible2=false}
    )
    },
    editRole(id){
    this.dialogVisible2=true
     search_roles(id).then(res=>{
       if (res.meta.status!==200){this.$message.error('获取数据失败')}
       this.rectify_role=res.data

     })
    },
        delete_role(id) {
      this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteRoles(id).then(res=>{
         if(res.meta.status!==200){this.$message.error('删除失败')}
         this.getroles()})
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  },
  created() {
  this.getroles()
  }

}
</script>

<style scoped>
.el-button.is-circle{
  border-radius: 5%;
}
.el-table{
  margin-top: 15px;
  font-size: 12px;
}
.el-tag{
  margin: 7px;
}
.bd-top{
  border-top: 1px solid #eeeeee;
}
.bd-bottom{
  border-bottom: 1px solid #eeeeee;
}
.vcenter{
  display: flex;
  align-items: center;
}
</style>